<template>
  <el-scrollbar>
    <div id="positionalQuery" class="main" v-loading="loading">
      <div class="sear-select-box df">
        <div>
          <el-select
            @change="yearChange"
            v-model="checkYear"
            style="width: 90px"
            no-data-text="暂无数据"
          >
            <el-option
              v-for="item in filterData"
              :key="item.year"
              :label="item.year"
              :value="item.year"
            />
          </el-select>
        </div>
        <div style="margin: 0 20px">
          <el-select
            @change="subjectChange"
            v-model="checkSubject"
            style="width: 90px"
            no-data-text="暂无数据"
          >
            <el-option
              v-for="item in subjectOptions"
              :key="item.course"
              :label="item.course"
              :value="item.course"
            />
          </el-select>
        </div>
        <div>
          <el-select
            @change="levelChange"
            v-model="checkLevel"
            style="width: 140px"
            no-data-text="暂无数据"
          >
            <el-option
              v-for="item in levelOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>

        <div class="search-box">
          <el-popover
            placement="bottom-start"
            trigger="click"
            :visible="popperVis"
            popper-class="popoverStyle"
          >
            <template #reference>
              <el-input
                clearable
                :prefix-icon="Search"
                v-model="searchvalue"
                style="width: 100%"
                placeholder="请输入您的分数"
              >
                <template #append>
                  <!-- style="background: var(--background-color); color: #fff" -->
                  <el-button size="small" @click="hanleSubmit">查询</el-button>
                  <!-- <div class="my-btn">搜索</div> -->
                </template>
              </el-input>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="charts-box">
        <mychart
          :chartsData="allTableData.list"
          :searchvalue="searchvalue"
          ref="myChartRef"
          :queryInfo="queryInfo"
        />
      </div>
      <div class="f14" style="margin: 20px 0">
        恭喜你，你的分数不属于压线分。立即开启
        <span
          @click="handleGoBatchInfo"
          class="curr"
          style="color: var(--color-text); text-decoration: underline"
          >智能填报</span
        >
        ，不浪费1分上好大学！
      </div>

      <div class="cards df">
        <div style="width: 25%">
          <div class="numb">{{ section || '-' }}</div>
          <div class="title">位次区间</div>
        </div>
        <div style="width: 25%">
          <div class="numb">{{ tfnum || '-' }}</div>
          <div class="title">同分人数</div>
        </div>
        <div style="width: 25%">
          <div class="numb">{{ lowestRank || '-' }}</div>
          <div class="title">建议位次</div>
        </div>
        <div style="width: 25%">
          <div class="numb">{{ competitionIndex }}</div>
          <div class="title">
            <span>竞争指数</span>
            <el-tooltip content="数据说明：" effect="light" placement="top">
              <template #content>
                <div class="f16" style="margin: 10px 0">数据说明：</div>
                <div style="margin-bottom: 10px">
                  【同分人数越多，竞争指数越高】
                </div></template
              >
              <span
                class="iconfont icon-wenhao f12"
                style="margin-left: 5px"
              ></span>
            </el-tooltip>
          </div>
        </div>
      </div>

      <div class="tips-card-box">
        <tipsCard :tipsData="tipsData" :type="true" />
      </div>

      <div class="first-table">
        <div
          class="df"
          style="
            justify-content: space-between;
            border-bottom: 1px solid #3333;
            height: 50px;
          "
        >
          <b style="">历年等位分</b>
          <div class="f12" style="color: #666">
            历年等位分即历年相近位次所对应的分数，可用于比较历年高考的成绩竞争情况
          </div>
        </div>
        <el-table
          empty-text="暂无数据"
          :data="allTableData.yearscore"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="date" label="年份" align="center">
            <template #default="scope">
              <div>{{ scope.row.year || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="位次区间" align="center">
            <template #default="scope">
              <div>
                {{ scope.row.highestRank + '-' + scope.row.lowestRank || '-' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="等位分" align="center">
            <template #default="scope">
              <div>{{ scope.row.minScore || '-' }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="two-table">
        <div class="two-table-tit df">
          <b style="margin-right: 5px">{{ userInfo.province }}</b>
          <b style="margin-right: 5px">{{ checkYear }}</b>
          <b style="margin-right: 5px">{{ checkSubject }}</b>
          <b style="margin-right: 5px">{{ checkLevel }}</b>
          <b style="margin-right: 5px">分段表</b>
        </div>
        <el-table
          empty-text="暂无数据"
          :data="allTableData.list"
          style="width: 100%"
          :row-class-name="twoTableRowClassName"
        >
          <el-table-column label="分数" align="center">
            <template #default="scope">
              <div>
                {{
                  scope.row.minScore == scope.row.maxScore
                    ? scope.row.minScore
                    : scope.row.minScore + '-' + scope.row.maxScore || '-'
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="位次区间" align="center">
            <template #default="scope">
              <div>
                {{ scope.row.highestRank + '-' + scope.row.lowestRank || '-' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="同分人数" align="center">
            <template #default="scope">
              <div>
                {{ scope.row.sameCount || '-' }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import mychart from './components/MyChart';
import tipsCard from '@/components/TipsCard';
import {
  getScoreStageInfo,
  getScoreStageFilter,
} from '@/api/positionalQuery/positionalQuery';
import { noteDesc } from '@/api/scoreline/scoreline';
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const searchvalue = ref('' + store.getters.user.userInfo.score);
const popperVis = ref(false);

const checkLevel = ref('');
const checkYear = ref('');
const checkSubject = ref('');

const levelOptions = ref();
const allTableData = ref([]);
const subjectOptions = ref([]);
const filterData = ref([]);

const gknum = ref(0);
const section = ref(0);
const tfnum = ref(0);
const lowestRank = ref(0);
const competitionIndex = ref('');
const myChartRef = ref(null);
const loading = ref(false);
const queryInfo = ref({});
const tipsData = ref({
  isShowIcon: true,
  tipsList: [],
  portDescription: '',
});

const fetchNoteDesc = () => {
  // 获取分数线描述信息
  noteDesc({
    type: 'pclDescription',
    pid: store.getters.user.userInfo.pid,
  }).then((res) => {
    tipsData.value.portDescription = res.data.data.pclDescription;
  });
};
fetchNoteDesc();
const tableRowClassName = ({ rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return 'striped-row';
  }
};
const twoTableRowClassName = ({ rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return 'striped-row';
  }
};
const reqData = ref({});

// 年份下拉框
const yearChange = (year) => {
  // 默认都是选中第一个

  let resFilter = filterData.value.filter((v) => v.year == year);
  checkSubject.value = resFilter[0].courses[0].course;
  subjectOptions.value = resFilter[0].courses;
  checkLevel.value = resFilter[0].courses[0].bzTypes[0];
  levelOptions.value = resFilter[0].courses[0].bzTypes;
  reqData.value.year = year;
  reqData.value.course = checkSubject.value;
  reqData.value.bzType = checkLevel.value;
  fetchScoreStageInfo(reqData.value);
};
// 选科下拉框
const subjectChange = (sub) => {
  // 默认选中第一个
  let resSubject = subjectOptions.value.filter((v) => v.course === sub);
  checkLevel.value = resSubject[0].bzTypes[0];
  levelOptions.value = resSubject[0].bzTypes;
  reqData.value.bzType = checkLevel.value;
  reqData.value.course = sub;
  fetchScoreStageInfo(reqData.value);
};

// 院校层级
const levelChange = (lev) => {
  reqData.value.bzType = lev;
  fetchScoreStageInfo(reqData.value);
};
const handleGoBatchInfo = () => {
  router.push('/batchInfo');
};
// 提交
const hanleSubmit = () => {
  if (!searchvalue.value) {
    ElMessage.error('请输入成绩');
    return;
  } else if (searchvalue.value <= 220) {
    // ElMessage.error(`您输入的${searchvalue.value}分无匹配的位次`);
    let resultArr = allTableData.value.list.filter(
      (v) =>
        searchvalue.value * 1 >= v.minScore &&
        searchvalue.value * 1 <= v.maxScore,
    );
    if (!resultArr.length) {
      ElMessage.error(`您输入的${searchvalue.value}分无匹配的位次`);
    }
    ElMessage.error(`没有找到该分数的对应位次，换个分数再试试吧`);
  } else {
    // myChartRef.value.handleSearchVale(searchvalue.value)
    reqData.value.score = searchvalue.value;
    fetchScoreStageInfo(reqData.value);
  }
};
const userInfo = computed(() => store.getters.user.userInfo);
// 筛选条件
const fetchScoreStageFilter = () => {
  // userInfo.value.pid
  getScoreStageFilter({ pid: userInfo.value.pid }).then((res) => {
    if (res.data.code == 20000) {
      filterData.value = res.data.data;
      //   默认选中第一项
      checkYear.value = res.data.data[0].year;
      subjectOptions.value = res.data.data[0].courses;
      levelOptions.value = subjectOptions.value[0].bzTypes;
      checkLevel.value = levelOptions.value[0];
      checkSubject.value = res.data.data[0].courses[0].course;
      reqData.value = {
        pid: userInfo.value.pid,
        // pid: "32",
        year: checkYear.value,
        // year:2022,
        score: searchvalue.value,
        course: checkSubject.value,
        bzType: checkLevel.value,
      };
      fetchScoreStageInfo(reqData.value);
    }
  });
};
const fetchScoreStageInfo = (reqData) => {
  loading.value = true;
  getScoreStageInfo(reqData)
    .then((res) => {
      if (res.data.code == 20000) {
        allTableData.value = res.data.data;
        loading.value = false;
        gknum.value =
          allTableData.value.list[
            allTableData.value.list.length - 1
          ].lowestRank; //高考人数
        diffRankQuery(allTableData.value.list);
      } else {
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

const diffRankQuery = (dataArr) => {
  let resultArr = dataArr.filter(
    (v) =>
      searchvalue.value * 1 >= v.minScore &&
      searchvalue.value * 1 <= v.maxScore,
  );
  if (resultArr.length > 0) {
    resultArr.forEach((i) => {
      section.value = i.highestRank + '-' + i.lowestRank; //位次区间
      // 建议位次
      lowestRank.value = i.lowestRank;
      tfnum.value = i.lowestRank - i.highestRank + 1; //同分人数
      // 竞争指数
      if (tfnum.value > 800) {
        competitionIndex.value = '高';
      } else if (tfnum.value <= 800 && tfnum.value >= 500) {
        competitionIndex.value = '中';
      } else if (tfnum.value < 500) {
        competitionIndex.value = '低';
      }
    });
    queryInfo.value = {
      section: section.value,
      lowestRank: lowestRank.value,
      tfnum: tfnum.value,
    };
  } else {
    section.value = 0;
    tfnum.value = 0;
  }
};
fetchScoreStageFilter();
</script>

<style lang="scss" scoped>
#positionalQuery {
  padding-bottom: 150px;
  .search-box {
    margin-left: 20px;
  }
  .cards {
    background: #f2f2f2;
    justify-content: space-around;
    text-align: center;
    .numb {
      color: #333;
      font-size: 25px;
      margin: 10px 0;
    }
    .title {
      margin-bottom: 10px;
      font-size: 14px;
      color: #999;
    }
  }
  .two-table {
    margin: 40px 0 20px 0;
  }
}
:deep(.el-input-group__append) {
  width: 70px;
  background: var(--background-color);
  color: #fff;
}
// 去掉悬停事件
:deep(.el-table tbody tr) {
  pointer-events: none;
}
</style>
<style>
.striped-row {
  background: #f2f2f2 !important;
}
</style>
